
<style scoped>
	.center {
		width: 100%;
		height: 100%;
		background-image: url('../assets/p.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	h1 {
		font-size: 30px;
		color: white;
	}
 
	.logon {
    /* background-image: url('../assets/p.png'); */
		/* background-color: #fff; */
		border-radius: 10px;
		/* box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); */
		/* position: relative;
		overflow: hidden; */
		width: 768px;
		max-width: 100%;
		min-height: 480px;
		margin-top: 20px;
		display: flex;
		/* background: -webkit-linear-gradient(right, #4284db, #29eac4); */
	}
 
	.overlaylong {
		border-radius: 10px 0 0 10px;
		width: 50%;
		height: 100%;
		background: -webkit-linear-gradient(right, #29eac4 , #4284db);
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
	.overlaylongleft {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background: -webkit-linear-gradient(right, #4284db, #29eac4);
		transform: translateX(100%);
		transition: transform 0.6s ease-in-out;
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
	.overlaylongright {
		border-radius: 10px 0 0 10px;
		width: 50%;
		height: 100%;
		background: -webkit-linear-gradient(right, #29eac4 , #4284db);
		transform: translateX(0%);
		transition: transform 0.6s ease-in-out;
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
	.overlaytitle {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
 
	.overlaytitleH2 {
		font-size: 30px;
		color: #fff;
		margin-top: 20px;
	}
 
	.overlaytitleP {
		font-size: 15px;
		color: #fff;
		margin-top: 20px;
	}
 
	.overlaytitleleft {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translateX(0%);
		transition: transform 0.6s ease-in-out;
	}
 
	.overlaytitleright {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translateX(-100%);
		transition: transform 0.6s ease-in-out;
	}
 
	.overlaytitle-Signin {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	.overlaytitle-Signup {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	.buttongohs {
		width: 180px;
		height: 40px;
		border-radius: 50px;
		border: 1px solid #fff;
		color: #fff;
		font-size: 15px;
		text-align: center;
		line-height: 40px;
		margin-top: 40px;
	}
 
	.overlaylongH2 {
		font-size: 25px;
		color: black;
		/* width: 250px; */
	}
 
	.overlaylong-Signin {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	.overlaylong-Signup {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	input {
		background-color: #eee;
		border: none;
		padding: 12px 15px;
		margin: 10px 0;
		width: 240px;
	}
	h3{
		font-size: 10px;
		margin-top: 10px;
		cursor: pointer;
	}
	.inupbutton{
		background-color: #29eac4;
		border: none;
		width: 180px;
		height: 40px;
		border-radius: 50px;
		font-size: 15px;
		color: #fff;	
		text-align: center;
		line-height: 40px;
		margin-top: 30px;
	}
</style>
 
<template>
	<div class="center">
		<h1>登录/ 注册</h1>
		<div class="logon">
			<div :class="overlaylong">
				<div class="overlaylong-Signin" v-if="disfiex == 0">
					<h2 class="overlaylongH2">登录</h2>
					<input type="text" v-model="loginForm.username" placeholder="user">
					<input type="password" v-model="loginForm.password" placeholder="password">
					<h3>忘记密码?</h3>
					<button class="inupbutton" @click="getLogin">登录</button>
				</div>
				<div class="overlaylong-Signup" v-if="disfiex == 1">
					<h2 class="overlaylongH2">注册</h2>
					<input type="text" v-model="regForm.username" placeholder="user">
					<input type="password" v-model="regForm.password" placeholder="password">
					<button class="inupbutton"  @click="getReg">注册</button>
				</div>
 
			</div>
			<div :class="overlaytitle">
				<div class="overlaytitle-Signin" v-if="disfiex == 0">
					<h2 class="overlaytitleH2">嘿，朋友！</h2>
					<p class="overlaytitleP">
						输入您的个人详细信息，与我们一起开始旅程吧!!
					</p>
					<div class="buttongohs" @click="Signin">注册</div>
				</div>
				<div class="overlaytitle-Signup" v-if="disfiex == 1">
					<h2 class="overlaytitleH2">欢迎回来！</h2>
					<p class="overlaytitleP">要与我们保持联系，请使用您的个人信息登录</p>
					<div class="buttongohs" @click="Signup">登录</div>
				</div>
			</div>
		</div>
 
	</div>
</template>
 
<script>
	export default {
		data() {
			return {
				overlaylong: 'overlaylong',
				overlaytitle: 'overlaytitle',
				disfiex: 0,
        regForm:{
                username: '',
                password: ''
            },
            loginForm:{
                username: 'admin',
                password: 'admin'
            },

			}
		},
		methods: {
      async getLogin(){
		// if(this.loginForm.password !='' && this.loginForm.password !=''){
			
		// let ret=await this.$http.post('user/login',this.loginForm);
		// if(ret.data.code !=0){
		// 	return this.$message.error(ret.data.msg);
		// }
		//  this.$message({
        //   message: '登录成功',
        //   type: 'success'
		//  })
        // let tk=ret.data.data.token;
		// localStorage.setItem('token',tk);           
        // this.$router.push('/home');
		// }else{
		// 	this.$message({
        //   message: '不能为空',
        //   type: 'warning'
		// 	})
		// }
		let ret=await this.$http.post('user/login',this.loginForm);
		console.log(ret);
		let tk=ret.data?.data?.token;
		localStorage.setItem('token',tk); 
		this.$router.push('/home');
      },
     async getReg(){
      
        if(this.regForm.password !='' && this.regForm.password !=''){
          let ret =await this.$http.post('/user/register',this.regForm);
          console.log(ret.data);
          if(ret.data.code !=200){
            return this.$message.error(ret.data.msg);

          }
          // 跳转到登录窗口
          this.overlaylong = "overlaylongright"
				  this.overlaytitle = "overlaytitleleft"
 
				setTimeout(() => {
					this.disfiex = 0
				}, 200)
        //成功提示
          this.$message({
          message: '注册成功',
          type: 'success'
        });
        }else{
          this.$message({
          message: '不能为空',
          type: 'warning'
        });
        }
        
      
     },
    //  登陆注册窗口跳转
			Signin() {
				this.overlaylong = "overlaylongleft"
				this.overlaytitle = "overlaytitleright"
				setTimeout(() => {
					this.disfiex = 1
				}, 200)
			},
			Signup() {
				this.overlaylong = "overlaylongright"
				this.overlaytitle = "overlaytitleleft"
 
				setTimeout(() => {
					this.disfiex = 0
				}, 200)
			}
		}
	}
</script>